<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>

<% include partials/head.ejs %>


    <body>
        <div class="ui container">
            <% include partials/header.ejs %>
            <% include partials/disclaimer.ejs %> 
                <div class="ui segment">

                    <div id="dimmer" class="ui dimmer">
                        <div class="ui indeterminate text loader" id="loadingText">Changing Password</div>
                    </div>

                    <h1 id="success" class="ui" style="text-align: center">Change Password</h1>
                    <div class="ui form" id="form">
                        <div class="inline fields">
                            <div class="six wide field">
                                <div class="ui labeled input">
                                    <input type="text" id="cp" placeholder="Enter new password" title="">
                                </div>
                            </div>

                        </div>
                        <div class="inline fields">
                            <div class="six wide field">
                                <div class="ui labeled input">
                                    <button id="submit" class="positive ui fluid button"><i class="wrench icon"></i>Submit</button>                                </div>                            
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        <style>
            .inline.fields {
                justify-content: center;
            }
        </style>

        <script>
            var loadingTexts = [
                "Changing Password",
                "Password Changed Successfully"
            ];

            var loadingIndex = 0;
            var isDone = false;
            $('#submit').click((e) => {
                $('#dimmer').addClass('active');
                changepass($('#cp').val());
                setTimeout(loaderText, 500);
            });

            function loaderText() {
                var nextTimeout = Math.floor(Math.random() * 1500) + 700;
                $('#loadingText').text(loadingTexts[loadingIndex]);
                loadingIndex++;
                if (loadingIndex !== loadingTexts.length) setTimeout(loaderText, nextTimeout);
                else
                    while (isDone) {
                        isDone = false;
                        $('#dimmer').fadeOut(500, () => {
                            $('#success').removeClass('active');
                        })
                        $('#form').fadeOut(500, () => {
                            $('#success').fadeIn(200);
                            $('#success').text("Password updated successfully")

                        })
                    }
            }

            function changepass(newpass) {
                $.post("/changepass?pass=" + newpass + "&hname=" + window.location.hostname, function(data) {
                    if (!data.error) {
                        isDone = true
                    } else showNotification('#f03434', data.error)
                });
            }

        </script>
        <% include partials/footer.ejs %>
    </body>

</html>
